<template>
		<view class="menuList" :style="{color: color,backgroundColor: backgroundColor}" @tap="menuClick">
			<view class="menuLeft">
				<slot></slot>
				<i v-if="leftIcon" class="iconfont" :class="leftIcon" />
				<image v-if="leftImage" :src="leftImage" />
			</view>
			<view class="menuMiddle">{{menuName}}</view>
			<view class="menuRight">
				<slot name="right"></slot>
				<i v-if="rightIcon" class="iconfont" :class="rightIcon" @click.stop="clickRight" />
				<image v-if="rightImage" :src="rightImage" @click.stop="clickRight" />
			</view>
		</view>
</template>

<script setup>
	/**
	 * menuList 菜单列
	 * @description 个人中心功能菜单列
	 * @property {String} leftImage 左侧图标图片
	 * @property {String} leftIcon 左侧图标
	 * @property {String} menuName 功能名称
	 * @property {String} color 字体颜色
	 * @property {String} backgroundColor 背景颜色
	 * @property {String} rightImage 右侧图标图片
	 * @property {String} rightIcon 右侧图标
	 * @event {Function} onClick 点击菜单出触发
	 * @event {Function} clickRight 右侧按钮点击时触发
	 */
	const props = defineProps({
		leftImage: {
			type: String,
			default: ''
		},
		leftIcon: {
			type: String,
			default: ''
		},
		menuName: {
			type: String,
			default: ''
		},
		rightImage: {
			type: String,
			default: ''
		},
		rightIcon: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#000000'
		},
		backgroundColor: {
			type: String,
			default: '#FFFFFF'
		}
	})
	const emits = defineEmits(['onClick','clickRight'])
	
	const menuClick = () =>{
		emits('onClick')
	}
	const clickRight = () =>{
		emits('clickRight')
	}
</script>

<style lang="scss">
	.menuList {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx #E5E5E5 solid;

		.menuLeft {
			width: 80rpx;
			height: 100rpx;
			float: left;

			image {
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx 10rpx 20rpx 10rpx;
			}
			
			.iconfont {
				color: var(--primary-color);
				/* #ifdef H5 */
				margin: 20rpx 10rpx 20rpx 10rpx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				margin: 0 10rpx 0 10rpx;
				/* #endif */
				// flex-shrink: 0;
				font-size: 60rpx;
			}
		}

		.menuMiddle {
			width: 500rpx;
			height: 100ux;
			line-height: 100rpx;
			float: left;
		}

		.menuRight {
			width: 80rpx;
			height: 100rpx;
			float: right;

			image {
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx 10rpx 20rpx 10rpx;
			}
			
			.iconfont {
				color: var(--primary-color);
				/* #ifdef H5 */
				margin: 20rpx 10rpx 20rpx 10rpx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				margin: 0 10rpx 0 10rpx;
				/* #endif */
				// flex-shrink: 0;
				font-size: 60rpx;
			}
		}
	}
</style>
